<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>条纹背景</title>
    <link rel="stylesheet" href="../public.css">
    <style>
        .box {
            width: 300px;
            height: 90px;
            margin: 20px auto;
            color: white;
            text-align: center;
        }

        .level {
            background: linear-gradient(#fb3, #58a);
        }

        .level1 {
            background: linear-gradient(#fb3 50%, #58a 50%);
            background-size: 100% 30px;
        }

        .level2 {
            background: linear-gradient(#fb3 33%, #58a 0, #58a 66%, yellowgreen 0);
            background-size: 100% 30px;
        }

        .vertical {
            background: linear-gradient(90deg, #fb3 33%, #58a 0, #58a 66%, yellowgreen 0);
            background-size: 30px 100%;
        }

        .slant {
            background: linear-gradient(45deg, #fb3 50%, #58a 50%);
        }

        .slant1 {
            background: linear-gradient(45deg, #fb3 50%, #58a 50%);
            background-size: 30px 30px;
        }

        .slant2 {
            background: linear-gradient(45deg,
                    #fb3 25%, #58a 0, #58a 50%,
                    #fb3 0, #fb3 75%, #58a 0);
            background-size: 30px 30px;
        }

        .slant3 {
            background: repeating-linear-gradient(45deg,
                    #fb3, #fb3 15px, #58a 0, #58a 30px, red 0, red 45px);
        }

        .slant4 {
            background: linear-gradient(45deg,
                    #fb3 16.6%, #58a 16.6%, #58a 33.2%, red 33.2%, red 49.8%, #fb3 49.8%, #fb3 66.4%, #58a 66.4%, #58a 83%, red 83%, red 0);

            background-size: 30px 30px;
        }

        .slant5 {
            background: #58a;
            background-image: repeating-linear-gradient(30deg,
                    hsla(0, 0%, 100%, .1),
                    hsla(0, 0%, 100%, .1) 15px,
                    transparent 0, transparent 30px);
        }
    </style>
</head>

<body>
    <div class="content">
        <h1>水平条纹</h1>
        <ul>
        </ul>
        <div class="box level">
        </div>
        <div class="box level1">
        </div>
        <div class="box level2">
        </div>
    </div>
    <div class="content">
        <h1>垂直条纹</h1>
        <ul>
        </ul>
        <div class="box vertical ">
        </div>
    </div>
    <div class="content">
        <h1>斜向条纹</h1>
        <ul>
        </ul>
        <div class="box slant">
        </div>
        <div class="box slant1">
        </div>
        <div class="box slant2">
        </div>
        <div class="box slant4">
            linear-gradient
        </div>
        <div class="box slant3">
            repeating-linear-gradient
        </div>
        <ul>
            <li>把最深的颜色指定为背景</li>
            <li>把半透明白色条纹叠加在背景色上，得到浅色背景</li>
        </ul>
        <div class="box slant5">
            linear-gradient
        </div>
    </div>
</body>

</html>